<template>
	<view class="uViewCustStyle">
		<u-form-item label="是否重复日程" prop="isRepeat" label-width="auto" :required="true">
			<u-switch v-model="isRepeatChecked" active-value="1" inactive-value="0" @change="isRepeatChange"
				:disabled="disabled">
			</u-switch>
		</u-form-item>
		<u-form-item v-if="showRepeatType" label="重复类型" prop="repeatType" label-width="180" :required="true">
			<js-select v-model="model.repeatType" dict-type="wechat_schedule_repeat_type" itemLabel="dictValue"
				itemValue="dictKey" placeholder="请选择重复类型" :disabled="disabled">
			</js-select>
		</u-form-item>
		<u-form-item v-if="showRepeatType" ref="uFormItemRepeatUntil" label="重复结束时间" prop="repeatUntil"
			label-width="auto" :required="false">
			<u-input v-model="model.repeatUntil" :type="disabled ? 'input' : 'select'"
				@click="uPickerRepeatUntil.show = !disabled" placeholder="请选择重复结束时间" :disabled="disabled">
			</u-input>
			<u-button v-if="!disabled" slot="right" type="primary" shape="circle" size="mini"
				@click="clearRepeatUntil">清除</u-button>
			<u-picker v-model="uPickerRepeatUntil.show" :mode="uPickerRepeatUntil.mode"
				:params="uPickerRepeatUntil.params" @confirm="confirm4RepeatUntil">
			</u-picker>
		</u-form-item>
		<u-form-item v-if="showFrequency" label="自定义频率" prop="frequency" label-width="180" :required="true">
			<js-select v-model="model.frequency" dict-type="wechat_schedule_frequency" itemLabel="dictValue"
				itemValue="dictKey" placeholder="请选择自定义频率" :disabled="disabled">
			</js-select>
		</u-form-item>
		<!-- 按天、周、月、年-->
		<u-form-item v-if="showRepeatInterval" label="重复间隔" prop="repeatInterval" label-width="180" :required="true">
			<js-select v-model="model.repeatInterval" :items="repeatIntervalOptions" itemLabel="label" itemValue="value"
				placeholder="请选择频率" :disabled="disabled">
			</js-select>
		</u-form-item>
		<!-- 按周 -->
		<u-form-item v-if="showFrequencyByDaysOfWeek" label="每周周几重复" prop="repeatDayOfWeek" label-width="180">
			<u-checkbox-group @change="repeatDayOfWeekGroupChange" :width="checkboxGroupProps.width"
				:wrap="checkboxGroupProps.wrap" :disabled="disabled">
				<u-checkbox v-model="item.checked" v-for="(item, index) in repeatDayOfWeekOptions" :key="index"
					:name="item.value">
					{{ item.label }}
				</u-checkbox>
			</u-checkbox-group>
		</u-form-item>
		<!-- 按月 -->
		<u-form-item v-if="showFrequencyByDaysOfMonth" label="每月哪几天重复" prop="repeatDayOfMonth" label-width="180">
			<u-checkbox-group @change="repeatDayOfMonthGroupChange" :width="checkboxGroupProps.width"
				:wrap="checkboxGroupProps.wrap" :disabled="disabled">
				<u-checkbox v-model="item.checked" v-for="(item, index) in repeatDayOfMonthOptions" :key="index"
					:name="item.value">
					{{ item.label }}
				</u-checkbox>
			</u-checkbox-group>
		</u-form-item>
	</view>
</template>

<script>
	export default {
		components: {},
		inject: {
			calendarFormModel: {
				default () {
					return null
				}
			}
		},
		props: {
			// u-form父组件的name
			parentName: {
				type: String,
				// required: true
			},
		},
		data() {
			return {
				model: {
					
				},
				uPickerRepeatUntil: {
					show: false,
					mode: 'time',
					params: {
						year: true,
						month: true,
						day: true,
						hour: true,
						minute: true,
						second: true
					}
				},
				checkboxGroupProps: {
					width: 'auto',
					wrap: false
				},
				disabled: true,
				showRepeatType: false,
				//是否显示~自定义频率
				showFrequency: false,
				//是否显示~重复间隔
				showRepeatInterval: false,
				//是否显示~每周周几重复
				showFrequencyByDaysOfWeek: false,
				//是否显示~每月哪几天重复
				showFrequencyByDaysOfMonth: false,
				repeatIntervalOptions: [],
				//每周周几重复
				repeatDayOfWeekOptions: [],
				//每月哪几天重复
				repeatDayOfMonthOptions: [],
				isRepeatChecked: false,
			}
		},
		watch: {
			'model.isRepeat': function(val, oldVal) {
				if (val == '1') {
					this.isRepeatChecked = true;
					this.showRepeatType = true;
				} else if (val == '0') {
					this.isRepeatChecked = false;
					this.showRepeatType = false;
					//重置model.repeatType
					this.model.repeatType = '';
				}
			},
			'model.repeatType': function(val, oldVal) {
				if (val == '99') {
					//自定义
					this.showFrequency = true;
					this.model.isCustomRepeat = '1';
				} else {
					this.showFrequency = false;
					//重置model.frequency
					this.model.frequency = '';
					this.model.isCustomRepeat = '0';
				}
			},
			'model.frequency': function(val, oldVal) {
				// debugger;
				let repeatIntervalOptions = this.repeatIntervalOptions;
				//查看或修改返回的model.frequency会为0(每日)，类型为number的情况
				if (val || val === 0) {
					this.showRepeatInterval = true;
				} else {
					this.showRepeatInterval = false;
					//重置repeatIntervalOptions
					repeatIntervalOptions.splice(0, repeatIntervalOptions.length);
					this.showFrequencyByDaysOfWeek = false;
					this.showFrequencyByDaysOfMonth = false;
					return;
				}
				if (val == '0') { //按天
					repeatIntervalOptions.splice(0, repeatIntervalOptions.length);
					for (let i = 1; i <= 365; i++) {
						this.repeatIntervalOptions.push({
							label: i + '天',
							value: i + ''
						});
					}
					this.showFrequencyByDaysOfWeek = false;
					this.showFrequencyByDaysOfMonth = false;
				} else if (val == '1') { //按周
					repeatIntervalOptions.splice(0, repeatIntervalOptions.length);
					for (let i = 1; i <= 52; i++) {
						repeatIntervalOptions.push({
							label: i + '周',
							value: i + ''
						});
					}
					this.showFrequencyByDaysOfWeek = true;
					this.showFrequencyByDaysOfMonth = false;
				} else if (val == '2') { //按月
					repeatIntervalOptions.splice(0, repeatIntervalOptions.length);
					for (let i = 1; i <= 12; i++) {
						repeatIntervalOptions.push({
							label: i + '个月',
							value: i + ''
						});
					}
					this.showFrequencyByDaysOfWeek = false;
					this.showFrequencyByDaysOfMonth = true;
				} else if (val == '5') { //按年
					repeatIntervalOptions.splice(0, repeatIntervalOptions.length);
					for (let i = 1; i <= 12; i++) {
						repeatIntervalOptions.push({
							label: i + '年',
							value: i + ''
						});
					}
					this.showFrequencyByDaysOfWeek = false;
					this.showFrequencyByDaysOfMonth = false;
				}
				if(val != '1') {
					// 非按周 置空 repeatDayOfWeek
					this.model.repeatDayOfWeek = '';
				}
				if(val != '2') {
					// 非按月 置空 repeatDayOfMonth
					this.model.repeatDayOfMonth = '';
				}
			},
		},
		created() {
			if(this.parentName) {
				// 方式一：支付宝、头条小程序不支持provide/inject，所以使用这个方法获取指定name的父组件
				let parent = this.$u.$parent.call(this, this.parentName);
				let parentModel = parent.model;
				//让当前组件的model属性指向父组件的model
				this.model = parentModel;
			}else {
				// 方式二：使用provide/inject方式，注意点支付宝、头条小程序不支持provide/inject
				if(this.calendarFormModel) {
					this.model = this.calendarFormModel;
				}
			}
			// debugger;
			this.initData();
		},
		mounted() {
			
		},
		methods: {
			initData() {
				let mode = this.$route.query.mode;
				if (mode === 'view') {
					this.disabled = true;
				} else if (mode === 'add' || mode === 'edit') {
					this.disabled = false;
				}
				this.initRepeatDayOptions();
			},
			initRepeatDayOptions() {
				// debugger;
				// 处理 repeatDayOfWeek
				let repeatDayOfWeek2Array = [];
				if (this.model.repeatDayOfWeek) {
					repeatDayOfWeek2Array = this.model.repeatDayOfWeek.split(',');
				}
				const daysOfWeek = ['一', '二', '三', '四', '五', '六', '日'];
				for (var i = 1; i <= 7; i++) {
					let checked = repeatDayOfWeek2Array.some(element => element == i);
					this.repeatDayOfWeekOptions.push({
						label: '周' + daysOfWeek[i - 1],
						value: i + '',
						checked: checked
					});
				}

				// 处理 repeatDayOfMonth
				let repeatDayOfMonth2Array = [];
				if (this.model.repeatDayOfMonth) {
					repeatDayOfMonth2Array = this.model.repeatDayOfMonth.split(',');
				}
				for (let i = 1; i <= 31; i++) {
					let checked = repeatDayOfMonth2Array.some(element => element == i);
					this.repeatDayOfMonthOptions.push({
						label: i + '号',
						value: i + '',
						checked: checked
					});
				}
			},
			isRepeatChange(value) {
				this.model.isRepeat = value;
			},
			getPickerResult(e, params) {
				let pickerResult = '';
				if (params.year) {
					pickerResult += e.year;
				}
				if (params.month) {
					pickerResult += '-' + e.month;
				}
				if (params.day) {
					pickerResult += '-' + e.day;
				}
				if (params.hour) {
					pickerResult += ' ' + e.hour;
				}
				if (params.minute) {
					pickerResult += ':' + e.minute;
				}
				if (params.second) {
					pickerResult += ':' + e.second;
				}
				return pickerResult;
			},
			confirm4RepeatUntil(e) {
				this.model.repeatUntil = this.getPickerResult(e, this.uPickerRepeatUntil.params);
				this.uPickerRepeatUntil.show = false;
			},
			clearRepeatUntil() {
				this.model.repeatUntil = '';
			},
			repeatDayOfWeekGroupChange(e) {
				this.model.repeatDayOfWeek = e.join(',');
			},
			repeatDayOfMonthGroupChange(e) {
				this.model.repeatDayOfMonth = e.join(',');
			},
		},
	}
</script>

<style>
</style>